<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
		<style type="text/css">
			.style1 {
				width: 50%;
			}
		</style>
		<script language="javascript" type="text/javascript">
			$(function() {
				//隔行显示奇数行背景颜色（#eeeeee），偶数行颜色（#999999）
				// $("#tb>tbody>tr:odd").hover().css("background-color", "#abf3e4");
				// $("#tb>tbody>tr:even").css("background-color", "#46e7bf");

				//光棒效果(移入颜色为#c07df7  移出颜色为原本颜色)
				//1、获取原本tr行的颜色值
				//2、设置自定义属性bg，并把原来的颜色赋值给它
				//3、将最新的颜色 赋值给当前tr行

				//1、取出存在bg属性的颜色
				//2、给当前tr赋值bg里面存的颜色
				var $bac;
				$("#tb>tbody>tr:odd").hover(function() {
					$bac = $(this).css("background-color");
					$(this).css("background-color", "#abf3e4");
				}, function() {
					$(this).css("background-color", $bac);
				});
				$("#tb>tbody>tr:even").hover(function() {
					$bac = $(this).css("background-color");
					$(this).css("background-color", "#46e7bf");
				}, function() {
					$(this).css("background-color", $bac);
				});

			})
		</script>
	</head>
	<body>
		<div>

			<table id="tb" class="style1">
				<tbody>
					<tr>
						<td>
							ADC
						</td>
						<td>
							金克斯
						</td>
					</tr>
					<tr>

						<td>
							辅助
						</td>
						<td>
							布隆
						</td>
					</tr>
					<tr>

						<td>
							法师
						</td>
						<td>
							安妮
						</td>
					</tr>
					<tr>

						<td>
							上单
						</td>
						<td>
							螃蟹
						</td>
					</tr>
					<tr>

						<td>
							打野
						</td>
						<td>
							盲僧
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
